<template>
    <div class="mainWrapper">

        <div class="top">
            <img class="avatar" v-if="commentData.user.head_img" :src="$axios.defaults.baseURL + commentData.user.head_img" alt="">
            <img class="avatar" v-else src="@/assets/avatar.jpg" alt="">
            <div class="info">
                <div class="name">
                    {{commentData.user.nickname}}
                </div>
                <div class="date">
                    2小时前
                </div>
            </div>
            <div class="btnReply" @click="handleClick">回复</div>
        </div>
        
        <CommentParent 
            :parentData="commentData.parent"
            v-if="commentData.parent"
        />

        <div class="mainContent">
            {{ commentData.content }}
        </div>
    </div>
</template>

<script>
    import CommentParent from "./parent";
    import eventBus from "../../utils/eventBus"
    export default {
        components: {
            CommentParent,
        },
        props: ["commentData"],
        methods: {
            handleClick() {
                console.log(eventBus);
                eventBus.$emit('callReply', this.commentData.id)
            }
        }
    };
</script>

<style lang="less" scoped>
.mainWrapper {
    padding: 10/360*100vw;
    border-bottom: 1px solid #888;
}
.top {
    display: flex;
    padding-bottom: 14/360*100vw;
    .avatar {
        width: 36/360*100vw;
        height: 36/360*100vw;
        border-radius: 50%;
        object-fit: cover;
    }
    .info {
        flex: 1;
        padding-left: 10/360*100vw;
        .name {
            font-size: 16/360*100vw;
            color: #333;
        }
        .date {
            font-size: 12/360*100vw;
            color: #888;
        }
    }
    .btnReply {
        font-size: 14/360*100vw;
        color: #888;
    }
}

.mainContent {
    font-size: 16/360*100vw;
    color: #333;
    padding-top: 14/360*100vw;
}
</style>